<template>
	<scroll-view @scroll="scroll" @scrolltolower="scrolltolower"  scroll-y="true" id="FillScroll" :style="{height:scrollHeight + 'px',background:backgroundColor}" >
		<slot name="element"></slot>
	</scroll-view>
</template>

<script>
	export default {
		props:{
			correct:{
				type:[Number,String],
				default:0
			},
			backgroundColor:{
				type:String,
				default:'#FFFFFF'
			}
		},
		data(){
			return{
				scrollHeight:200
			}
		},
		mounted() {
			this.$nextTick(()=>{
				//放在tab-page-linkage下的时候 不知道该组件什么时候渲染完成 需要加个settimeout 现在time=300 可能也会出现高度计算错误的问题
				setTimeout(()=>{this.getHeight()},300)
			})
		},
		methods:{
			scroll(e){
				this.$emit('scroll',e)
			},
			scrolltolower(e){
				this.$emit('scrolltolower',e)
			},
			getHeight(){
				var system = this.util.getSb()
				// console.log('system',system)
				let selectorQuery = uni.createSelectorQuery().in(this)
				selectorQuery.select('#FillScroll').boundingClientRect().exec((res) => {
					this.scrollHeight = system.windowHeight - res[0].top - this.correct
					// console.log('res',res)
					// console.log('scrollHeight',this.scrollHeight)
				});
			},
		}
	}
</script>

<style>
</style>
